<template>
  <video :src="payload.videoUrl" controls class="video" object-fit="contain" @error="videoError"></video>
</template>

<script>
export default {
  name: 'VideoElement',
  props: {
    payload: {
      type: Object,
      required: true
    },
    message: {
      type: Object,
      required: true
    },
  },
  methods: {
    videoError(e) {
      this.$store.commit('showMessage', { type: 'error', message: '视频出错，错误原因：' + e.target.error.message })
    },
  }
}
</script>

<style lang="scss" scoped>
  .video{
    max-height: 2.666667rem;
    max-width: 100%;
  }
</style>
